<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Honey, 欢迎回家</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="css/dropload.css" rel="stylesheet" type="text/css" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/button.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/index.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="search-container yellow">
        <input type="text" name="keyword" placeholder="小区" class="search-container-item">
        <span class="search-icon"></span>
    </div>
    <ul class="search-bar">
        <li class="search-bar-item"><a href="#layer-1">区域</a></li>
        <li class="search-bar-item"><a href="#layer-2">价格</a></li>
        <li class="search-bar-item"><a href="#layer-3">方式</a></li>
        <li class="search-bar-item"><a href="#layer-4">更多</a></li>
    </ul>
    <div class="header-padding"></div>
    <div class="header-padding"></div>
    <div class="slider-container">
        <div id="slider-dom" class='slider'>
        </div>
        <script id="slider" type="text/html">
            {{each bannerlist}}
            <div class='slide'>
                <div class='slidecontent'>
                    <a href="javascript:;"><img src="{{$value.pic}}" /></a>
                </div>
            </div>
            {{/each}}
        </script>
    </div>
    <ul class="nav-bar">
        <li class="nav-bar-item">
            <a href="about.html">
                <i class="icon icon-about"></i>
                <span class="item-title">关于我们</span>
            </a>
        </li>
        <li class="nav-bar-item">
            <a href="join.html">
                <i class="icon icon-house"></i>
                <span class="item-title">房东加盟</span>
            </a>
        </li>
        <li class="nav-bar-item">
            <a href="hr.html">
                <i class="icon icon-join"></i>
                <span class="item-title">招贤纳士</span>
            </a>
        </li>
        <li class="nav-bar-item">
            <a href="map.html">
                <i class="icon icon-map"></i>
                <span class="item-title">地图</span>
            </a>
        </li>
    </ul>
    <div class="container">
        <div id="list-dom">
        </div>
    </div>
    <script id="list" type="text/html">
        {{each list}}
        <div class="card">
            <a value_id="{{ $value.id }}" class="view">
                <div class="card-head">
                    <img class="card-media" src="{{ $value.pic }}" />
                    <div class="card-head-title">￥{{ $value.money }}/月</div>
                </div>
                <div class="card-body">
                    <span class="card-body-title">{{ $value.neighbourhood_name }}</span> {{each $value.configuration}}
                    <label class="{{ $index | color }}">{{ $value }}</label> {{/each}}
                    <ul class="card-body-content">
                        <li>{{ $value.region_name }}</li>
                        <li>{{ $value.population }}</li>
                        <li>{{ $value.size }}㎡</li>
                        <li class="last">{{ $value.nums }}间在租</li>
                    </ul>
                    <div class="divider"></div>
                </div>
            </a>
        </div>
        {{/each}}
    </script>
    <div class="footer-padding"></div>
    <ul class="bottom-bar">
        <li class="bottom-bar-item">
            <a class="active" href="javascript:;">
                <i class="icon icon-home"></i>
                <span class="item-title">小家</span>
            </a>
        </li>
        <li class="bottom-bar-item">
            <a href="message.html">
                <i class="icon icon-message"></i>
                <span class="item-title">消息</span>
            </a>
        </li>
        <li class="bottom-bar-item">
            <a href="person.html">
                <i class="icon icon-person"></i>
                <span class="item-title">Honey</span>
            </a>
        </li>
    </ul>
    <div class="layer">
        <div id="layer-1" class="layer-item">
            <ul id="area-dom" class="left-side-menu gray">
            </ul>
            <script id="area" type="text/html">
                <li><a data-id="" href="javascript:;" class="active">不限</a></li>
                {{each regionlist}}
                <li><a data-id="{{$value.id}}" href="javascript:;">{{$value.name}}</a></li>
                {{/each}}
            </script>
            <ul id="zone-dom" class="right-side-menu">
            </ul>
            <script id="zone" type="text/html">
                <li><a data-id="" href="javascript:;" class="active">不限</a></li>
                {{each list}}
                <li><a data-id="{{$value.id}}" href="javascript:;">{{$value.name}}</a></li>
                {{/each}}
            </script>
        </div>
        <div id="layer-2" class="layer-item">
            <ul id="price-dom" class="center-side-menu">
                <li><a href="javascript:;" class="active">不限</a></li>
                <li><a data-min="500" data-max="700" href="javascript:;">500 - 700</a></li>
                <li><a data-min="700" data-max="1000" href="javascript:;">700 - 1000</a></li>
                <li><a data-min="1000" data-max="1500" href="javascript:;">1000 - 1500</a></li>
                <li><a data-min="1500" data-max="2000" href="javascript:;">1500 - 2000</a></li>
                <li><a data-min="2000" href="javascript:;">2000以上</a></li>
            </ul>
        </div>
        <div id="layer-3" class="layer-item">
            <ul id="rental-dom" class="center-side-menu">
            </ul>
            <script id="rental" type="text/html">
                <li><a data-id="" href="javascript:;" class="active">不限</a></li>
                {{each rentallist}}
                <li><a data-id="{{$value.id}}" href="javascript:;">{{$value.name}}</a></li>
                {{/each}}
            </script>
        </div>
        <div id="layer-4" class="layer-item">
            <ul class="main-container">
                <li class="line-side">
                    <span>入住时间：</span>
                    <ul id="checkin-dom" class="right-side"></ul>
                </li>
                <li class="line-side">
                    <span>配&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置：</span>
                    <ul id="config-dom" class="right-side"></ul>
                </li>
                <li class="line-side">
                    <span>室&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;友：</span>
                    <ul id="roommate-dom" class="right-side"></ul>
                </li>
                <li class="line-side">
                    <span>交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通：</span>
                    <ul id="traffic-dom" class="right-side"></ul>
                </li>
                <li class="line-side">
                    <span>周&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;边：</span>
                    <ul id="around-dom" class="right-side"></ul>
                </li>
            </ul>
            <script id="checkin" type="text/html">
                <li><a class="active" href="javascript:;">不限</a></li>
                {{each checklist}}
                <li><a data-id="{{$value.id}}" href="javascript:;">{{$value.name}}</a></li>
                {{/each}}
            </script>
            <script id="config" type="text/html">
                <li><a class="active" href="javascript:;">不限</a></li>
                {{each configlist}}
                <li><a data-id="{{$value.id}}" href="javascript:;">{{$value.name}}</a></li>
                {{/each}}
            </script>
            <script id="roommate" type="text/html">
                <li><a class="active" href="javascript:;">不限</a></li>
                {{each roommatelist}}
                <li><a data-id="{{$value.id}}" href="javascript:;">{{$value.name}}</a></li>
                {{/each}}
            </script>
            <script id="traffic" type="text/html">
                <li><a class="active" href="javascript:;">不限</a></li>
                {{each tarafficlist}}
                <li><a data-id="{{$value.id}}" href="javascript:;">{{$value.name}}</a></li>
                {{/each}}
            </script>
            <script id="around" type="text/html">
                <li><a class="active" href="javascript:;">不限</a></li>
                {{each peripherylist}}
                <li><a data-id="{{$value.id}}" href="javascript:;">{{$value.name}}</a></li>
                {{/each}}
            </script>
            <a id="mix" href="javascript:;" class="btn yellow">Honey, Go !</a>
        </div>
    </div>
    <div class="layer-mask"></div>
    <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=khHXy6EILIbvw5xZTNGQM1K8"></script> -->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="js/jquery.simpleslider.package.min.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/dropload.min.js" type="text/javascript"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript">
        var rs = {
            point: {
                lng: 104.065735,
                lat: 30.659462,
            },
            addressComponents: {
                city: '成都市'
            }
        };

        // 页数
        var page = 0;
        // 每页展示5个
        var limit = 5;
        // (function() {
        //     var geolocation = new BMap.Geolocation();
        //     var geoc = new BMap.Geocoder();
        //     geolocation.getCurrentPosition(function(r) {
        //         if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        //             geoc.getLocation(r.point, function(data) {
        //                 rs = data;
        //                 load();
        //             });
        //         } else {
        //             load();
        //         }
        //     }, {
        //         enableHighAccuracy: true
        //     })
        // })();

        function load() {
            rs.point = bee.convertLocation(rs.point);
            bee.cache('point', rs.point);
            bee.request({
                url: '/Index/Index/index',
                data: {
                    lng: rs.point.lng,
                    lat: rs.point.lat,
                    city: rs.addressComponents.city,
                    page: 1,
                    limit: limit
                },
                success: function(res) {
                    // $('[href="#layer-1"]').text(rs.addressComponents.district);

                    // 房源列表下拉加载更多
                    $('.container').dropload({
                        scrollArea: window,
                        loadDownFn: function(me) {
                            page++;

                            bee.request({
                                url: '/Index/Index/index',
                                data: {
                                    lng: rs.point.lng,
                                    lat: rs.point.lat,
                                    city: rs.addressComponents.city,
                                    page: page,
                                    limit: limit
                                },
                                success: function(result) {
                                    if (result.list.length) {
                                        bee.template('list', result);
                                        $('.view').on('click', function() {
                                            var id = $(this).attr('value_id');
                                            var url = "house.html?id=" + id + "&user_id=" + localStorage.getItem('user_id');
                                            location.href = url;
                                        })
                                    } else {
                                        me.lock();
                                        me.noData();
                                    }
                                    me.resetload();
                                }
                            });
                        }
                    });

                    // 轮播图
                    bee.template('slider', res, true);
                    $(".slider").simpleSlider();
                    setTimeout(function() {
                        var height = $('.slide img').height();
                        $('.slider-container').height(height);
                    }, 500);

                    // 地区列表
                    bee.template('area', res, true);
                    $('body').on('click', '#area-dom a', function() {
                        $('#area-dom a').removeClass('active');
                        $(this).addClass('active');
                        var data = getParam();
                        bee.open('search.html', data);
                        return;
                        var id = $(this).attr('data-id');
                        bee.request({
                            url: '/Index/Index/getRegList',
                            data: {
                                region_id: id,
                            },
                            success: function(data) {
                                bee.template('zone', data, true);
                                $('body').on('click', '#area-dom a:first, #zone-dom a', function() {
                                    $('#zone-dom a').removeClass('active');
                                    $(this).addClass('active');
                                    var data = getParam();
                                    bee.open('search.html', data);
                                });
                            }
                        });
                    });

                    // 价格列表
                    $('body').on('click', '#price-dom a', function() {
                        $('#price-dom a').removeClass('active');
                        $(this).addClass('active');
                        var data = getParam();
                        bee.open('search.html', data);
                    });

                    // 方式列表
                    bee.template('rental', res, true);
                    $('body').on('click', '#rental-dom a', function() {
                        $('#rental-dom a').removeClass('active');
                        $(this).addClass('active');
                        var data = getParam();
                        bee.open('search.html', data);
                    });

                    // 更多》入住时间
                    bee.template('checkin', res, true);
                    $('body').on('click', '#checkin-dom a', function() {
                        $('#checkin-dom a').removeClass('active');
                        $(this).addClass('active');
                    });

                    // 更多》配置
                    bee.template('config', res, true);
                    $('body').on('click', '#config-dom a', function() {
                        $('#config-dom a').removeClass('active');
                        $(this).addClass('active');
                    });

                    // 更多》室友
                    bee.template('roommate', res, true);
                    $('body').on('click', '#roommate-dom a', function() {
                        $('#roommate-dom a').removeClass('active');
                        $(this).addClass('active');
                    });

                    // 更多》交通
                    bee.template('traffic', res, true);
                    $('body').on('click', '#traffic-dom a', function() {
                        $('#traffic-dom a').removeClass('active');
                        $(this).addClass('active');
                    });

                    // 更多》周边
                    bee.template('around', res, true);
                    $('body').on('click', '#around-dom a', function() {
                        $('#around-dom a').removeClass('active');
                        $(this).addClass('active');
                    });

                    $('body').on('click', '#mix', function() {
                        var data = getParam();
                        bee.open('search.html', data);
                    });
                }
            });
        }

        load();

        $(function() {
            bee.wxConfig(function() {
                bee.hideAllNonBaseMenuItem();
            }, function(res) {});

            var keyword = bee.getQueryString('keyword');
            $('[name="keyword"]').val(decodeURI(keyword));
            $('body').on('blur', '[name="keyword"]', function() {
                var data = getParam();
                bee.open('search.html', data);
            });
            $('body').on('keydown', '[name="keyword"]', function(event) {
                if (event.keyCode === 13) {
                    $('[name="keyword"]').trigger('blur');
                }
            });

            $('body').on('click', '.search-bar .search-bar-item a', function() {
                if (!$(this).hasClass('disabled') && $('.layer').css('display') !== 'none') {
                    $('.layer-mask').trigger('click');
                    return;
                }
                var obj = $(this).attr('href');
                $(obj).siblings().removeClass('active');
                $(obj).addClass('active');
                $('.search-bar .search-bar-item a').addClass('disabled');
                $(this).removeClass('disabled');
                $('.layer, .layer-mask').show();
                $('body').css('overflow', 'hidden');
            });
            $('body').on('click', '.layer-mask', function() {
                $('.layer, .layer-mask').hide();
                $('body').css('overflow', 'visible');
                $('.search-bar .search-bar-item a').removeClass('disabled');
            });
        });

        function getParam() {
            var area = $('#area-dom a.active').attr('data-id');
            var street = $('#zone-dom a.active').attr('data-id');
            var min_money = $('#price-dom a.active').attr('data-min');
            var max_money = $('#price-dom a.active').attr('data-max');
            var ztype = $('#rental-dom a.active').attr('data-id');
            var time = $('#checkin-dom a.active').attr('data-id');
            var peizhi = $('#config-dom a.active').attr('data-id');
            var shiyou = $('#roommate-dom a.active').attr('data-id');
            var jiaotong = $('#traffic-dom a.active').attr('data-id');
            var zhoubian = $('#around-dom a.active').attr('data-id');
            var keyword = $('[name="keyword"]').val();

            var data = {};
            if ((street === undefined || street === '') && (area !== undefined && area !== '')) {
                data.area = area;
            } else if (street !== undefined && street !== '') {
                data.street = street;
            }

            if (min_money !== undefined && min_money !== '') {
                data.min_money = min_money;
            }

            if (max_money !== undefined && max_money !== '') {
                data.max_money = max_money;
            }

            if (ztype !== undefined && ztype !== '') {
                data.ztype = ztype;
            }

            if (time !== undefined && time !== '') {
                data.time = time;
            }

            if (peizhi !== undefined && peizhi !== '') {
                data.peizhi = peizhi;
            }

            if (shiyou !== undefined && shiyou !== '') {
                data.shiyou = shiyou;
            }

            if (jiaotong !== undefined && jiaotong !== '') {
                data.jiaotong = jiaotong;
            }

            if (zhoubian !== undefined && zhoubian !== '') {
                data.zhoubian = zhoubian;
            }

            if (keyword !== undefined && keyword !== '') {
                data.keyword = encodeURI(encodeURI(keyword));
            }

            return data;
        }
    </script>
</body>

</html>
